<script setup>
import { uniqueId } from 'lodash-es'
import mpegts from 'mpegts.js'
// import { MonitorWebrtcIP } from '@/config'

const props = defineProps({
  src: {
    type: String,
    default: '',
  },
})
const state = reactive({
  videoId: uniqueId(),
})

const flvPlayer = ref()
/**
 * 创建 mpegts 实例
 */
const initFlv = () => {
  if(mpegts.isSupported()) {
    // 根据id名称创建对应的video
    const ele = document.getElementById(state.videoId)
    console.log(props.src, 'newData')
    flvPlayer.value = mpegts.createPlayer(
      {
        type: 'flv', // 指定媒体类型
        isLive: true, // 开启直播（是否为实时流）
        hasAudio: false, // 关闭声音（如果拉过来的视频流中没有音频一定要把这里设置为fasle，否则无法播放）
        cors: true, // 开启跨域访问
        url: props.src, // 指定流链接（这里是传递过过来的视频流的地址）
      },
      {
        enableWorker: false, // 启用分离的线程进行转换（如果不想看到控制台频繁报错把它设置为false，官方的回答是这个属性还不稳定，所以要测试实时视频流的话设置为true控制台经常报错）
        enableStashBuffer: false, // 关闭IO隐藏缓冲区（如果需要最小延迟，则设置为false，此项设置针对直播视频流）
        stashInitialSize: 128, // 减少首帧等待时长（针对实时视频流）
        lazyLoad: false, // 关闭懒加载模式（针对实时视频流）
        lazyLoadMaxDuration: 0.2, // 懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒
        deferLoadAfterSourceOpen: false, // 在MediaSource sourceopen事件触发后加载。在Chrome上，在后台打开的标签页可能不会触发sourceopen事件，除非切换到该标签页。
        liveBufferLatencyChasing: true, // 追踪内部缓冲区导致的实时流延迟
        liveBufferLatencyMaxLatency: 1.5, // HTMLMediaElement 中可接受的最大缓冲区延迟（以秒为单位）之前使用flv.js发现延时严重，还有延时累加的问题，而mpegts.js对此做了优化，不需要我们自己设置快进追帧了
        liveBufferLatencyMinRemain: 0.3, // HTMLMediaElement 中可接受的最小缓冲区延迟（以秒为单位）
      },
    )
    // mpegts
    flvPlayer.value.attachMediaElement(ele)
    play(flvPlayer.value)
    // flvEvent()
  }
}

const play = (flv) => {
  flv.load()
  flv.play()
}

// mpegts
const flvEvent = () => {
  // 视频错误信息回调
  flvPlayer.value.on(
    mpegts.Events.ERROR,
    (errorType, errorDetail, errorInfo) => {
      console.log(
        `类型:${JSON.stringify(errorType)}`,
        `报错内容${errorDetail}`,
        `报错信息${errorInfo}`,
      )
    },
  )
  // 【重要事件监听】http 请求建立好后，该事件会一直监听 mpegts 实例
  flvPlayer.value.on(mpegts.Events.STATISTICS_INFO, () => {
    const end = flvPlayer.value.buffered.end(0) // 获取当前buffered值（缓冲区末尾）
    const differTime = end - flvPlayer.value.currentTime // 获取bufferend与当前播放位置的差值
    console.log(`差值为：${differTime}`)
  })
}

/**
 * 重新加载视频
 */
const loadPlay = () => {
  initFlv()
}
onMounted(() => {
  loadPlay()
})

onBeforeUnmount(() => {
  if(!flvPlayer.value) {
    return
  }
  flvPlayer.value.unload()
  flvPlayer.value.detachMediaElement()
  flvPlayer.value.destroy()
})

const { videoId } = toRefs(state)
watch(() => props.src, (newData) => {
  console.log(newData, 'newData')
}, { deep: true, immediate: true })
</script>

<template>
  <video :id="videoId" class="monitor-player" controls autoplay muted style="width: 100%;height: 100%;" />
  <!-- <video :id="videoId" class="monitor-player" controls autoplay muted width="800" height="600" /> -->
</template>

<style scoped lang="scss">
.monitor-player {
  overflow: hidden;
  border-radius: 10px;
}
</style>
